<template>
  <div class="keyPersonnelManage">
    <div class="label-box">重点人员管理</div>
    <div class="top-box">
      <div class="left-box">
        <div class="label">重点人员分类统计</div>
        <div class="content">
          <div v-for="(item, index) in keyPersonList" :key="index" class="content-box">
            <div class="title-view">
              <div class="color-view" :style="{ background: item.colorValue }"></div>
              {{ item.name }}
            </div>
            <div class="count-view">
              <div>{{ item.value }}人</div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="label">重点人员抓拍图像</div>
        <div class="content">
          <!-- <div v-for="(item, index) in imageList" :key="index" class="img-box">
            <el-image :src="item.leftImgUrl" class="img-left">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <el-image :src="item.rightImgUrl" class="img-right">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div> -->
          <el-empty description="暂无数据" :image-size="40"></el-empty>
        </div>
      </div>
    </div>
    <div class="bottom-box">
      <el-table ref="table" :data="tableData" style="width: 100%" :height="'calc(100% - 40px)'">
        <el-table-column prop="grade" label="等级" min-width="60" align="center"></el-table-column>
        <el-table-column prop="type" label="预警类型" min-width="70"></el-table-column>
        <!-- <el-table-column prop="time" label="预警时间"> </el-table-column> -->
        <el-table-column label="预警时间" width="100">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.time" placement="top">
              <span style="width: 5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{
                scope.row.time
              }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="location" label="预警地点" show-overflow-tooltip></el-table-column>
        <el-table-column prop="content" label="预警内容" show-overflow-tooltip> </el-table-column>
        <div slot="empty">
          <el-empty description="暂无数据" :image-size="40"></el-empty>
        </div>
      </el-table>
    </div>
  </div>
</template>

<script>
import { listKeyPerson, getStatisticsList } from "@/api/common/other"
export default {
  components: {},
  props: {},
  data() {
    return {
      keyPersonList: [
        { name: "在逃人员", value: 0, colorValue: "#22c8d0" },
        { name: "涉稳人员", value: 0, colorValue: "#0b5bfd" },
        { name: "涉毒人员", value: 0, colorValue: "#ccbd80" },
        { name: "精神病人员", value: 0, colorValue: "#cfa038" },
        { name: "前科人员", value: 0, colorValue: "#ce65a4" },
        { name: "两失人员", value: 0, colorValue: "#c13a9d" },
        { name: "上访人员", value: 0, colorValue: "#3fc23d" }
      ],
      imageList: [
        // { leftImgUrl: require("@/assets/img/headImage2.png"), rightImgUrl: require("@/assets/img/headImage1.png") },
        // { leftImgUrl: require("@/assets/img/headImage3.png"), rightImgUrl: require("@/assets/img/headImage3.png") }
        { leftImgUrl: "", rightImgUrl: "" },
        { leftImgUrl: "", rightImgUrl: "" }
      ],
      tableData: []
    }
  },
  created() {
    this.listKeyPerson()
    this.getStatisticsList({
      groupName: "keyperson"
    })
  },
  mounted() {
    this.setAutoScroll()
  },
  watch: {},
  methods: {
    // 实现自动滚动的方法
    setAutoScroll() {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      setInterval(() => {
        // 元素自增距离顶部1像素
        divData.scrollTop += 1
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
          // 重置table距离顶部距离
          divData.scrollTop = 0
        }
      }, 200) // 滚动速度
    },
    // 大屏数据
    listKeyPerson() {
      listKeyPerson().then((res) => {
        let arr = []
        res.data.data.map((item) => {
          if (item.category == "zt") {
            item.category = "在逃人员"
          } else if (item.category == "sw") {
            item.category = "涉稳人员"
          } else if (item.category == "sd") {
            item.category = "涉毒人员"
          } else if (item.category == "jsb") {
            item.category = "精神病人员"
          } else if (item.category == "qk") {
            item.category = "前科人员"
          } else if (item.category == "ls") {
            item.category = "两失人员"
          } else if (item.category == "sf") {
            item.category = "上访人员"
          }
          arr.push({
            grade: item.level,
            type: item.category,
            time: item.alertTime,
            location: item.alertLocation,
            content: item.alertContent
          })
        })
        this.tableData = arr
      })
    },
    // 重点人员
    getStatisticsList(params) {
      getStatisticsList(params).then((res) => {
        // { name: "在逃人员", value: 1, colorValue: "#22c8d0" },
        this.keyPersonList = res.data
        let arr = []
        res.data.map((item) => {
          arr.push({
            name: item.statisticsKey,
            value: Number(item.statisticsValue),
            colorValue: this.getRandomColor()
          })
        })
        this.keyPersonList = arr
      })
    },
    getRandomColor() {
      var letters = "0123456789ABCDEF"
      var color = "#"
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)]
      }
      return color
    }
  }
}
</script>

<style scoped lang="scss">
.keyPersonnelManage {
  width: 100%;
  height: calc(100% - 30px);
  margin-top: 35px;
  background: rgba(3, 10, 14, 0.7);
  border: 1px solid #194871;
  position: relative;
  z-index: 3;

  .label-box {
    height: 40px;
    line-height: 40px;
    padding: 0 30px;
    font-size: 20px;
    color: #01c2ff;
    background: #20426a;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .top-box {
    height: 42%;
    margin: 15px 15px 0;
    display: flex;
    justify-content: space-between;

    .left-box,
    .right-box {
      .label {
        height: 40px;
        line-height: 40px;
        margin-left: 20px;
        font-size: 16px;
        color: #a8d6ff;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .content {
        height: calc(100% - 42px);
        border: 1px dashed #a8d6ff;
      }
    }

    .left-box {
      width: calc(40% - 2px);
      // background: #8f7917;
      height: calc(100% - 35px);

      .label {
        margin-left: 20px;
      }

      .content {
        padding: 8px 20px 0px;
        box-sizing: border-box;
        font-size: 13px;
        overflow: auto;
        height: 100%;

        .content-box {
          color: rgba(255, 255, 255, 0.8);
          display: flex;
          justify-content: space-between;
          height: 13.5%;

          // margin-top: 10px;
          .title-view {
            display: flex;
            align-items: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            .color-view {
              margin-right: 5px;
              width: 15px;
              height: 8px;
            }
          }

          .count-view {
            display: flex;
            align-items: center;
          }

          &:last-child {
            margin-bottom: 10px;
          }
        }
      }
    }

    .right-box {
      width: calc(60% - 3px);

      .label {
        text-align: center;
      }

      .content {
        .img-box {
          width: 100%;
          height: 50%;
          padding-bottom: 1px;
          box-sizing: border-box;
          display: flex;
          .img-left {
            width: 35%;
            height: 100%;
            // padding-right: 1px;
            box-sizing: border-box;
            background: #f5f7fa9c;
            border-right: 1px solid #030910;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .img-right {
            width: 65%;
            height: 100%;
            background: #f5f7fa9c;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
  }

  .bottom-box {
    height: 58%;
    padding: 20px 10px;
    box-sizing: border-box;
    overflow: hidden;
  }
}

::v-deep {
  .el-image__error,
  .el-image__placeholder {
    background: #f5f7fa9c;
  }

  //修改表头的背景颜色横向渐变色
  .el-table {
    thead {
      color: #159aff;
      font-weight: 500;
      // background: linear-gradient(to right, #081630, #076c80) !important;
      background: #0e2943 !important;

      & th {
        background-color: transparent;
        padding: 6px 0;
      }

      & tr {
        background-color: transparent;
        padding: 6px 0;
      }
    }
  }

  // 修改表格字体颜色
  .el-table__body td {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    padding: 8px 0;
  }

  // 设置表格背景透明
  .el-table th {
    background-color: transparent !important;

    &:hover {
      background-color: transparent !important;
    }
  }

  .el-table tr {
    background-color: transparent !important;

    &:hover {
      background-color: transparent !important;
    }
  }

  .el-table--enable-row-transition .el-table__body td,
  .el-table .cell {
    background-color: transparent;
  }

  .el-table,
  .el-table__expanded-cell {
    background-color: transparent;
  }

  .el-table__body tr:hover > td {
    background-color: transparent !important;
  }

  // 修改横线颜色
  .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border-bottom: 0px solid #364459;
  }

  // 去掉底部多余横线
  .el-table::before {
    display: none;
  }

  // 保留垂直滚动且隐藏滚动条
  .el-table__body-wrapper::-webkit-scrollbar {
    width: 0px !important;
    height: 0px;
  }
}
</style>
